<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>口碑统计</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/Market.css">
</head>
<body>
    <header>口碑统计</header>
    <main>
        <div class="Box">
            <nav>
                <span shu="1" class="active">登记量和报名量统计</span>
                <span shu="2">退单量统计</span>
                <span shu="3">咨询量统计</span>
            </nav>
            <div class="date">
                <p>日期选择:</p>
                <p  shu="0" class="now" id="active">本月</p>
                <p  shu="2" class="now prev">上月</p>
                <p>选择日期</p>
                <div class="rili begin"><i class="fa fa-calendar"></i><input type="text" placeholder="开始日期" id="begin"></div>
                <div class="Lj">- </div>
                <div class="rili end"><i class="fa fa-calendar"></i><input type="text" placeholder="结束日期" id="end"></div>
            </div>
            <div class="table">
                <table>
                    <tr class="biaotou">
                        <th width="12%">地区</th>
                        <th width="12%">JAVA</th>
                        <th width="12%">JAVA精英班</th>
                        <th width="12%">Web大前端</th>
                        <th width="12%">UI视觉设计</th>
                        <th width="12%">大数据</th>
                        <th width="12%">Python课程</th>
                        <th width='12%'>Unity3D</th>
                    </tr>

                </table>
            </div>
        </div>
    </main>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script src="laydate/laydate.js"></script>
<script src="js/oApublic.js"></script>
<script src="js/fun.js"></script>
<script>
    $.ajax({
        url:WORurl,
        type: "post",
        dataType: "json",
        data: {
            method: 'cMonth'
        },
        success: function (data) {
            console.log(data)
            if (data.code == 200) {
                var a = data.result;
                $('th').parent().siblings().remove();
                for (var k in a) {
                    $('<tr><td>'+ k +'</td><td>'+ (a[k].Java || 0 )+'</td><td>'+ (a[k].Java大数据 || 0) +'</td><td>'+ (a[k].Java大数据 || 0) +'</td><td>'+ (a[k].UI || 0) +'</td><td>'+ (a[k].Html || 0) +'</td><td>'+ (a[k].python || 0) +'</td><td>'+ (a[k].unity3dCount || 0) +'</td></tr>').appendTo('table')
                    }
            }
        },
        error: function (xhr, error) {
            console.log(error)
        }
    })
    $('.prev').click(function () {
        alert('上月数据')
        $.ajax({
        url:WORurl,
        type: "post",
        dataType: "json",
        data: {
            method: 'cMonth'
        },
        success: function (data) {
            console.log(data)
            if (data.code == 200) {
                var a = data.result;
                $('th').parent().siblings().remove();
                for (var k in a) {
                    $('<tr><td>'+ k +'</td><td>'+ (a[k].Java || 0 )+'</td><td>'+ (a[k].Java大数据 || 0) +'</td><td>'+ (a[k].Java大数据 || 0) +'</td><td>'+ (a[k].UI || 0) +'</td><td>'+ (a[k].Html || 0) +'</td><td>'+ (a[k].python || 0) +'</td><td>'+ (a[k].unity3dCount || 0) +'</td></tr>').appendTo('table')
                    }
            }
        },
        error: function (xhr, error) {
            console.log(error)
        }
    })
    })
    $('.now').click(function () {
        $.ajax({
        url:WORurl,
        type: "post",
        dataType: "json",
        data: {
            method: 'cMonth'
        },
        success: function (data) {
            console.log(data)
            if (data.code == 200) {
                var a = data.result;
                $('th').parent().siblings().remove();
                for (var k in a) {
                    $('<tr><td>'+ k +'</td><td>'+ (a[k].Java || 0 )+'</td><td>'+ (a[k].Java大数据 || 0) +'</td><td>'+ (a[k].Java大数据 || 0) +'</td><td>'+ (a[k].UI || 0) +'</td><td>'+ (a[k].Html || 0) +'</td><td>'+ (a[k].python || 0) +'</td><td>'+ (a[k].unity3dCount || 0) +'</td></tr>').appendTo('table')
                    }
            }
        },
        error: function (xhr, error) {
            console.log(error)
        }
    })
    })
    $('#end').click(function () {
        $('#layui-laydate2 td').unbind();
        $('#layui-laydate2 td').click(function () {
            alert('结束时间')
            console.log($('#begin').val())
            console.log($('#end').val())
            if ($('#end').val() >= $('#begin').val()) {
                $.ajax({
                    url:WORurl,
                    type: "post",
                    dataType: "json",
                    data: {
                        'beginTime': $('#begin').val(),
                        'endTume': $('#end').val()
                    },
                    success: function (data) {
                        console.log(data)
                        if (data.code == 200) {
                            var a = data.result;
                            $('th').parent().siblings().remove();
                            for (var k in a) {
                                $('<tr><td>'+ k +'</td><td>'+ (a[k].Java || 0 )+'</td><td>'+ (a[k].Java大数据 || 0) +'</td><td>'+ (a[k].Java大数据 || 0) +'</td><td>'+ (a[k].UI || 0) +'</td><td>'+ (a[k].Html || 0) +'</td><td>'+ (a[k].python || 0) +'</td><td>'+ (a[k].unity3dCount || 0) +'</td></tr>').appendTo('table')
                            }
                        }
                    },
                    error: function (xhr, error) {
                        console.log(error)
                    }
                })
            } else if ($('#end').val() < $('#begin').val()) {
                alert('请输入正确时间')
            }
        })
    })
    $('#begin').click(function () {
        $('#layui-laydate1 td').unbind();
        $('#layui-laydate1 td').click(function () {
            // alret('开始时间')
            console.log($('#begin').val())
            console.log($('#end').val())
            if ($('#end').val() >= $('#begin').val()) {
                $.ajax({
                    url:WORurl,
                    type: "post",
                    dataType: "json",
                    data: {
                        'beginTime': $('#begin').val(),
                        'endTume': $('#end').val()
                    },
                    success: function (data) {
                        console.log(data)
                        if (data.code == 200) {
                            var a = data.result;
                            $('th').parent().siblings().remove();
                            for (var k in a) {
                                $('<tr><td>'+ k +'</td><td>'+ (a[k].Java || 0 )+'</td><td>'+ (a[k].Java大数据 || 0) +'</td><td>'+ (a[k].Java大数据 || 0) +'</td><td>'+ (a[k].UI || 0) +'</td><td>'+ (a[k].Html || 0) +'</td><td>'+ (a[k].python || 0) +'</td><td>'+ (a[k].unity3dCount || 0) +'</td></tr>').appendTo('table')
                            }
                        }
                    },
                    error: function (xhr, error) {
                        console.log(error)
                    }
                })
            } else if ($('#end').val() < $('#begin').val()) {
                alert('请输入正确时间')
            }
        })
    })
    $('nav span').click(function () {
        $(this).addClass('active'),
            $(this).siblings().removeClass('active')
    });
    $('.date .now').click(function () {
        $(this).siblings().attr("id", ""),
            $(this).attr("id", "active")
    });
    $('.date .rili').click(function(){
        $(this).siblings().removeClass('active'),  
        $(this).addClass('active')
    })
    laydate.render({
        elem: '#begin'
        //指定元素
    });
    laydate.render({
        elem: "#end"
        //指定元素
    });
</script>
</html>